@charset "utf-8";
*{
    margin:0;
    padding:0;
}
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
.web{
    font-family: 苹方;
    font-size: 0;
    >header{
        margin-top:15px;
        margin-bottom:r(43);
        font-size:0;
        display:flex;
        display:-webkit-flex;
        justify-content: space-around;
        align-items: center;
        >section{
            width:r(370);
            >img{
                width:100%;
            }
            &:nth-of-type(2){
                display: none;
            }
        }//logo
        >nav{
            display: none;
        }
        >.nav{
            font-size:0;
            width:r(1044);
            display:flex;
            display:-webkit-flex;
            justify-content: space-between;
            >li{
                cursor: pointer;
                position: relative;
                font-size: r(30);
                font-family: 宋体;
                color:#000;
                >a{
                    color:#000;
                    &:hover{
                        color:#e67958;
                    }
                }
            }
            >.border_san::after{
                content: "";
                position: absolute;
                display: inline-block;
                left: 0%;
                bottom: -50%;
                transform: translate(100%,50%);
                width: 0;
                height:0;
                border-top:r(15) solid rgb(71, 71, 71);
                border-bottom:r(10) solid transparent;
                border-left:r(10) solid transparent;
                border-right:r(10) solid transparent;
                // background: #000;
            }
        }
    }//头部
      >.banner{       
        position: relative;
        >img{
            width:r(1920);
        }
        >.banner_content{
            width:100%;
            position: absolute;
            z-index: 999;
            text-align: center;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            >h1{
                font-size: r(48);
                color:#fff;
            }
            >p{
                margin-top:r(90);
                margin-bottom:r(100);
                font-size:r(24);
                color: #f2efec;
            }
            >a{
                cursor: pointer;
                display: inline-block;
                font-size:r(26);
                padding:r(20) r(75);
                border-radius: 30px;
                color:#fff;
                background: #786ff8;
            }
        }
    }
    // >h1{
    //     margin:0 auto;
    //     // display: inline-block;
    //     margin-top:r(158);
    //     width:r(240);
    //     margin-bottom:r(150);
    //     position: relative;
    //     font-size:r(48);
    //     color:#000;
    //     text-align: center;
    //     &::after{
    //         content:"";
    //         position: absolute;
    //         bottom: -10px;
    //         left:0;
    //         display: inline-block;
    //         width:r(240);
    //         height:3px;
    //         background: #887fef;
    //     }
    // }//标题
    >.title_bg{
        position: relative;
        margin:0 auto;
        margin-top:r(150);
        margin-bottom:r(130);
        width:r(480);
        height:r(143);
        >img{
            width: 100%;
        }
        >h1{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            text-align: center;
            font-size:r(36);
            color:#fff;
            >span{
                color:#786ff8;
            }
        }
    }
    >.video_content{
        display: flex;
        display:-webkit-flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width:r(1591);
        margin:0 auto;
        margin-bottom:0px;
        >section{
            margin-bottom: r(227);
            position: relative;
            width:r(680);
            height:r(416);
            border-radius: 20px;
            background: linear-gradient(#857AEF,#BCD9FD);
            >article{
                position: relative;
                border-top-right-radius: 20px;
                border-top-left-radius: 20px;
                display: flex;
                display:-webkit-flex;
                justify-content: space-between;
                align-items: center;
                width:100%;
                height:r(343);
                background: #f3f5fd;
                >.left{
                    margin-left:r(45);
                    >.zimuimg{
                        position: absolute;
                        z-index: 0;
                        top:0;
                        left: r(10);
                        width:r(315);
                        >img{
                            width:100%;
                        }
                    }
                    >h3{
                        font-size: r(40);
                        color:#000;
                    }
                    >p{
                        margin-bottom:r(20);
                        font-size:r(30);
                        color:#878282;
                        &:nth-of-type(1){
                            margin-top:r(30);
                        }
                    }
               
                        >span{
                            position: relative;
                            z-index: 999;
                            color:#fff;
                            border-radius: 20px;
                            font-size: r(18);
                            display: inline-block;
                            padding:r(14) r(44);
                            background:#776ff7;
                            box-shadow:5px 5px 10px #a7bff8 ;
                            transition:background .5s  ease-in-out,color .5s ease-in-out;
                         
                            &:hover{
                                background: #fbfeae;
                                color: #8dc9f3;
                            }
                        }
                    
                }//左
                >aside{
                    
                        width:r(260);
                        >img{
                           border-top-right-radius: 10px;
                            width:100%;
                        }
                }//右
            }
            >p{
                position: absolute;
                bottom:0;
                left:r(18);
                transform: translateY(-50%);
                font-size: r(26);
                color:#fff;
            }
            &:nth-of-type(2){
                background: linear-gradient(#79b5ef,#aee6f5);
            }
            &:nth-of-type(5){
                background: linear-gradient(#79b5ef,#aee6f5);
                // margin-bottom: r(130);
            }
            &:nth-of-type(6){
                // margin-bottom:r(130);
            }
        }
    }//电影
    >div{
        text-align: center;
        margin-bottom:r(190);
        >span{
            text-align: center;
            display: inline-block;
            color:#fff;
            padding:r(18) r(75);
            background: #776FF7;
            font-size: r(26);
            border-radius: 30px;
        }
    }
    >footer{
        position: relative;
        font-family: 微软雅黑;
        width:r(1920);
        >img{
            width:100%;
        }
        >aside{
            position: absolute;
            top:r(207);
            right:r(223);
            >p{
                font-size: r(40);
                color:#fff;
                margin-bottom:r(80);
            }
            >input{
                vertical-align: middle;
                height:r(72);
                width:r(545);
                border-top-left-radius: 50px;
                border-bottom-left-radius: 50px;
                font-size: r(14);
                border: 0;
                padding: 0 r(20);
            }
            >span{
                vertical-align: middle;
                display:inline-block;
                text-align: center;
                line-height: r(16);
                color:#786ff8;
                background: #fff;
                border-top-right-radius: 50px;
                border-bottom-right-radius: 50px;
                font-size: r(16);
                height:r(72);
                padding:r(28) r(18);
            }
        }
    }
}
.zz{
    display: none;
    animation: zoomIn 1s;
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index:999;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    >.video_box{
        position: fixed;
        width:80vw;
        height:40vw;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index:9999;
        // // padding:10vw;
        // box-sizing:content-box;
        // background: saddlebrown;
        background: rgba(0,0,0,0.5);
        video{
            width:100%; 
        }
        .x_close{
            position: absolute;
            top:5%;
            right:0%;
            transform: translate(-50%,-50%);
            z-index: 99999;
            font-size:30px;
            color:#fff;
        }
    }
}
.go_Top{
    position: fixed;
    right:0;
    bottom: 0;
    z-index: 999;
    font-size:16px;
    color: #fff;
    padding: r(15);
    background: #776FF7;
}



@media only screen and (min-width: 768px)and (max-width:992px) {
    .web{
        >header{
            >section{
                >img{
                    width:100%;
                }
                &:nth-of-type(2){
                    display: none;
                }
            }//logo
            >nav{
                display: none;
            }
            >.nav{
                >li{
                    font-size: 16px;
                    font-family: 宋体;
                    color:#000;
                    >a{
                        color:#000;
                        &:hover{
                            color:#e67958;
                        }
                    }
                }
            }
        }//头部
        >.banner{    
            display: none;   
            position: relative;
            >img{
                width:r(1920);
            }
            >.banner_content{
                width:100%;
                position: absolute;
                z-index: 999;
                text-align: center;
                left:50%;
                top:50%;
                transform: translate(-50%,-50%);
                >h1{
                    font-size: r(48);
                    color:#fff;
                }
                >p{
                    margin-top:r(90);
                    margin-bottom:r(100);
                    font-size:r(24);
                    color: #f2efec;
                }
                >a{
                    display: inline-block;
                    font-size:r(26);
                    padding:r(20) r(75);
                    border-radius: 30px;
                    color:#fff;
                    background: #786ff8;
                }
            }
        }
        >h1{
            margin:0 auto;
            // display: inline-block;
            margin-top:r(158);
            width:r(240);
            margin-bottom:r(150);
            position: relative;
            font-size:r(48);
            color:#000;
            text-align: center;
            &::after{
                content:"";
                position: absolute;
                bottom: -10px;
                left:0;
                display: inline-block;
                width:r(240);
                height:3px;
                background: #887fef;
            }
        }//标题
        >.video_content{
            display: flex;
            display:-webkit-flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width:r(1591);
            margin:0 auto;
            margin-bottom:20px;
            >section{
                margin-bottom: r(100);
                position: relative;
                width:r(680);
                height:r(416);
                border-radius: 20px;
                background: linear-gradient(#857AEF,#BCD9FD);
                >article{
                    border-top-right-radius: 20px;
                    border-top-left-radius: 20px;
                    display: flex;
                    display:-webkit-flex;
                    justify-content: space-between;
                    align-items: center;
                    width:100%;
                    height:r(343);
                    background: #f3f5fd;
                    >.left{
                        margin-left:r(45);
                        >.zimuimg{
                            position: absolute;
                            z-index: 0;
                            top:0;
                            left: r(10);
                            width:50%;
                            >img{
                                width:100%;
                            }
                        }
                        >h3{
                            font-size: r(40);
                            color:#000;
                        }
                        >p{
                            margin-bottom:r(20);
                            font-size:r(30);
                            color:#878282;
                            &:nth-of-type(1){
                                margin-top:r(30);
                            }
                        }
                   
                            >span{
                                position: relative;
                                z-index: 999;
                                color:#fff;
                                border-radius: 20px;
                                font-size: r(18);
                                display: inline-block;
                                padding:r(14) r(44);
                                background:#776ff7;
                                box-shadow:5px 5px 10px #a7bff8 ;
                                transition:background .5s  ease-in-out,color .5s ease-in-out;
                             
                                &:hover{
                                    background: #fbfeae;
                                    color: #8dc9f3;
                                }
                            }
                        
                    }//左
                    >aside{
                        
                            width:r(260);
                            >img{
                               border-top-right-radius: 10px;
                                width:100%;
                            }
                    }//右
                }
                >p{
                    position: absolute;
                    bottom:0;
                    left:r(18);
                    transform: translateY(-50%);
                    font-size: r(26);
                    color:#fff;
                }
                &:nth-of-type(2){
                    background: linear-gradient(#79b5ef,#aee6f5);
                }
                &:nth-of-type(3){
                    background: linear-gradient(#79b5ef,#aee6f5);
                    // margin-bottom: r(130);
                }
                &:nth-of-type(4){
                    // margin-bottom:r(130);
                }
            }
        }//电影
        >div{
            text-align: center;
            margin-bottom:r(190);
            >span{
                text-align: center;
                display: inline-block;
                color:#fff;
                padding:r(18) r(75);
                background: #776FF7;
                font-size: r(26);
                border-radius: 30px;
            }
        }
        >footer{
            position: relative;
            font-family: 微软雅黑;
            width:r(1920);
            >img{
                width:100%;
            }
            >aside{
                position: absolute;
                top:r(207);
                right:r(223);
                >p{
                    font-size: r(40);
                    color:#fff;
                    margin-bottom:r(80);
                }
                >input{
                    vertical-align: middle;
                    height:r(72);
                    width:r(545);
                    border-top-left-radius: 50px;
                    border-bottom-left-radius: 50px;
                    font-size: r(14);
                    border: 0;
                    padding: 0 r(20);
                }
                >span{
                    vertical-align: middle;
                    display:inline-block;
                    text-align: center;
                    line-height: r(16);
                    color:#786ff8;
                    background: #fff;
                    border-top-right-radius: 50px;
                    border-bottom-right-radius: 50px;
                    font-size: r(16);
                    height:r(72);
                    padding:r(28) r(18);
                }
            }
        }
    }
}
@media only screen and (max-width: 768px) {
    .web{
        >header{
            margin:0 auto;
            margin-top:20px;
            margin-bottom:r(43);
            font-size:0;
            display:flex;
            display:-webkit-flex;
            justify-content: space-between;
            align-items: center;
            width:85%;
            >section{
                // margin-left:32px;
                width:r(150);
                >img{
                    width:100%;
                }
                &:nth-of-type(1){
                    display: none;
                }
                &:nth-of-type(2){
                    display: block;
                }
            }//logo
            >nav{
                display: flex;
                display:-webkit-flex;
                flex-direction: column;
                // flex-wrap: wrap;
                margin:0;
                padding:0;
                width:36px;
                // margin-right:32px;
                
                >span{
                    margin-bottom:5px;
                    width:25px;
                    height:3px;
                    border-radius: 3px;
                    background: #333;
                }
            }
            >.nav{
                position: absolute;
                top:5px;
                right: r(270);
                font-size:0;
                width:130px;
                display:flex;
                display:-webkit-flex;
                flex-wrap: wrap;
                z-index: 9999;
                animation: fadeIn .5s;
                border: 1px #d3d3d3 solid;
                box-shadow: 0px 1px 1px #a0a0a0;
                border-radius: 10px;
                display: none;
                >li{
                    background:#fff;
                    padding:0;
                    margin:0;
                    text-align: center;
                    padding:8px 0;
                    width: 100%;
                    font-size: 12px;
                    font-family: 宋体;
                    color:#000;
                    &:hover{
                        color:#fff;
                        background: #e67958;
                    }
                    >a{
                        color:#000;
                        &:hover{
                            color:#fff;;
                        }
                    }
                }
            }
        }//头部
        >.banner{       
            width:100%;
            >img{
                width:100%;
            }
            >.banner_content{
                >h1{
                }
                >p{
                    margin-top:r(90);
                    margin-bottom:r(100);
                    font-size:r(24);
                    color: #f2efec;
                }
                >a{
                    font-size:r(26);
                    padding:r(20) r(75);
                    border-radius: 30px;
                }
            }
        }
        >.title_bg{
            position: relative;
            margin:0 auto;
            margin-top:r(150);
            margin-bottom:r(130);
            width:r(580);
            height:r(143);
            >img{
                width: 100%;
            }
            >h1{
                position: absolute;
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);
                text-align: center;
                font-size:r(68);
                color:#fff;
                >span{
                    color:#786ff8;
                }
            }
        }
        // >h1{
        //     margin:0 auto;
        //     // display: inline-block;
        //     margin-top:r(158);
        //     width:r(350);
        //     margin-bottom:r(150);
        //     position: relative;
        //     font-size:r(48);
        //     color:#000;
        //     text-align: center;
        //     &::after{
        //         content:"";
        //         position: absolute;
        //         bottom: -10px;
        //         left:0;
        //         display: inline-block;
        //         width:r(350);
        //         height:3px;
        //         background: #887fef;
        //     }
        // }//标题
        >.video_content{
            display: flex;
            display:-webkit-flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width:80%;
            margin:0 auto;
            margin-bottom:20px;
            >section{
                margin-bottom: r(100);
                position: relative;
                width:100%;
                height:180px;
                border-radius: 20px;
                background: linear-gradient(#857AEF,#BCD9FD);
                >article{
                    border-top-right-radius: 20px;
                    border-top-left-radius: 20px;
                    display: flex;
                    display:-webkit-flex;
                    justify-content: space-between;
                    align-items: center;
                    width:100%;
                    height:150px;
                    background: #f3f5fd;
                    >.left{
                        margin-left:r(45);
                        >.zimuimg{
                            position: absolute;
                            z-index: 0;
                            top:0;
                            left: r(10);
                            width:50%;
                            >img{
                                width:100%;
                            }
                        }
                        >h3{
                            font-size: r(80);
                            color:#000;
                        }
                        >p{
                            margin-bottom:r(20);
                            font-size:r(60);
                            color:#878282;
                            &:nth-of-type(1){
                                margin-top:r(30);
                            }
                        }
                   
                            >span{
                                margin-top:r(40);
                                position: relative;
                                z-index: 999;
                                color:#fff;
                                border-radius: 20px;
                                font-size: r(18);
                                display: inline-block;
                                padding:r(20) r(65);
                                background:#776ff7;
                                box-shadow:5px 5px 10px #a7bff8 ;
                                transition:background .5s  ease-in-out,color .5s ease-in-out;
                             
                                &:hover{
                                    background: #fbfeae;
                                    color: #8dc9f3;
                                }
                            }
                        
                    }//左
                    >aside{
                        position: relative;
                            width:40%;
                            height:150px;
                            overflow: hidden;
                            >img{
                                position: absolute;
                                top:50%;
                                left: 50%;
                                transform: translate(-50%,-50%);
                                border-top-right-radius: 10px;
                                height:100%;
                            }
                    }//右
                }
                >p{
                    position: absolute;
                    bottom:0;
                    left:r(56);
                    transform: translateY(-50%);
                    font-size: r(26);
                    color:#fff;
                }
                &:nth-of-type(2){
                    background: linear-gradient(#79b5ef,#aee6f5);
                }
                &:nth-of-type(3){
                    background: linear-gradient(#79b5ef,#aee6f5);
                    margin-bottom: r(130);
                }
                &:nth-of-type(4){
                    margin-bottom:r(130);
                }
            }
        }//电影
        >div{
            text-align: center;
            margin-bottom:r(190);
            >span{
                text-align: center;
                display: inline-block;
                color:#fff;
                padding:r(18) r(75);
                background: #776FF7;
                font-size: r(26);
                border-radius: 30px;
            }
        }
        >footer{
            position: relative;
            font-family: 微软雅黑;
            width:100%;
            >img{
                width:100%;
            }
            >aside{
                position: absolute;
                top:r(207);
                right:r(223);
                >p{
                    font-size: r(40);
                    color:#fff;
                    margin-bottom:r(80);
                }
                >input{
                    display: none;
                }
                >span{
                    display: none;
                }
            }
        }
    }
    .zz{
        display: none;
        animation: zoomIn 1s;
        position: fixed;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index:999;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        >.video_box{
            position: fixed;
            width:100vw;
            height:80vw;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            z-index:9999;
            // // padding:10vw;
            // box-sizing:content-box;
            // background: saddlebrown;
            background: rgba(0,0,0,0.5);
            video{
                width:100%; 
                height:80vw;
            }
            .x_close{
                position: absolute;
                top:5%;
                right:0%;
                transform: translate(-50%,-50%);
                z-index: 99999;
                font-size:30px;
                color:#fff;
            }
        }
    }
}

